var VideoUpload = function () {
  var template = /* html */ `
    <div class="video-upload clearfix" v-loading.fullscreen.lock="hasLoading&&uploading&&hasFullLoading">
      <el-upload ref="videoUpload" class="video-upload-input" :class="{'can-upload':!readonly&&!uploading}" :accept="accept" :show-file-list="false" :multiple="false"
        :auto-upload="false" :disabled="readonly||uploading" :drag="drag" action="" :on-change="handleUploadChange">
        <i v-if="videoUrl===''" class="el-icon-plus video-uploader-icon"></i>
        <div v-else class="video-upload-content">
          <video :src="videoUrl"></video>
          <div v-if="videoHandle&&videoHandle.length>0" class="fixed-div upload-video-handle">
            <div class="upload-mask"></div>
            <div class="upload-video-btns">
              <span v-if="videoHandle.indexOf('preview')!==-1" title="预览" @click.stop="previewVideo">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-if="!readonly&&videoHandle.indexOf('delete')!==-1" title="删除" @click.stop="deleteVideo">
                <i class="el-icon-delete"></i>
              </span>
            </div>
          </div>
        </div>

        <div v-if="uploading" class="fixed-div uploader-progress">
          <div class="upload-mask"></div>
          <div class="uploader-progress-content">
            <el-progress type="circle" :percentage="progressValue"></el-progress>
          </div>
        </div>
      </el-upload>

      <el-dialog fullscreen append-to-body class="dialog-fullscreen" title="视频预览" :visible.sync="openPreview">
        <div class="upload-video-preview">
          <video v-if="openPreview" :src="videoUrl" controls="controls"></video>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      value: {
        type: String,
        required: true
      },
      readonly: {
        type: Boolean,
        default: false
      },
      autoUpload: {
        type: Boolean,
        default: true
      },
      accept: {
        type: String,
        default: 'video/*'
      },
      drag: {
        type: Boolean,
        default: false
      },
      uploadCheckMethod: Function,
      errorMsg: {
        type: String,
        default: '请选择视频格式文件上传'
      },
      videoHandle: {
        type: Array,
        default: function () {
          return ['preview', 'delete'];
        }
      },
      hasFullLoading: {
        type: Boolean,
        default: false
      },
      hasLoading: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      value: function () {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }

        this.videoUrl = this.value;
      }
    },

    data: function () {
      return {
        uploading: false,
        videoUrl: this.value,
        inputValue: null,
        progressValue: 0,
        uploadField: null,
        openPreview:false
      };
    },

    methods:{
      handleUploadChange:function(file){
        var status = file.status;
        if (status !== 'ready') {
          return;
        }

        var self = this;
        this.checkUploadVideoValid(file).then(function(flag){
          if (!flag) {
            return;
          }

          if (self.autoUpload) {
            self.uploadVideo(file);
            return;
          }

          var videoUrl = self.videoUrl;
          self.videoUrl = URL.createObjectURL(file.raw);
          self.uploadField = file;
          var type = videoUrl === '' ? 'add' : 'update';
          self.$emit('change', file, type);
        });
      },

      uploadVideo:function(file){
        this.progressValue = 0;
        this.uploading = true;

        var self = this;
        return postFileToQiniu('fileManager/getQiniuToken', file.raw,function (percent) {
          self.progressValue = _.round(percent, 2);
        }).then(function(url){
          self.uploading = false;
          if (self.autoUpload) {
            self.videoUrl = URL.createObjectURL(file.raw);
          } else {
            self.uploadField = null;
          }
          self.$refs.videoUpload.clearFiles();
          self.inputValue = url;
          self.$emit('input', url);
          self.$emit('upload-success', url);
          return url;
        }).catch(function (error) {
          self.uploading = false;
          self.$refs.videoUpload.clearFiles();
          self.$alert('视频上传失败');
          self.$emit('upload-error', error);
          throw error;
        });
      },

      checkUploadVideoValid:function(file){
        var uploadCheckMethod = this.uploadCheckMethod;
        if (uploadCheckMethod !== undefined) {
          if (typeof uploadCheckMethod !== 'function') {
            throw new Error('uploadCheckMethod is not a function');
          }
          return uploadCheckMethod(file.raw);
        }

        var type = file.raw.type;
        var valid = type.indexOf('video/') === 0;
        if (!valid) {
          this.$message.error({
            message: this.errorMsg,
            duration: 2000
          });
        }
        return Promise.resolve(valid);
      },

      previewVideo:function(){
        this.openPreview = true;
      },

      deleteVideo:function(){
        var videoUrl = this.videoUrl;
        this.videoUrl = '';
        this.uploadField = null;
        this.inputValue = '';
        this.$emit('input', '');
        this.$emit('delete', videoUrl);
      },

      isLoading:function(){
        return this.uploading;
      },

      checkVideoExist: function () {
        return this.videoUrl !== '';
      }
    },

    template: template
  };
}();
